<template>
  <div>
    <van-tabbar route v-if="isShowTabbar" active-color="#31BC8D" inactive-color="#969C9E">
      <van-tabbar-item replace to="/" icon="home-o">
        <span>首页</span>
        <img
          slot="icon"
          slot-scope="home"
          :src="home.active ? tabbarIcon.home.active : tabbarIcon.home.normal"
        >
      </van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="user-o">
        <span>我的</span>
        <img
          slot="icon"
          slot-scope="my"
          :src="my.active ? tabbarIcon.my.active : tabbarIcon.my.normal"
        >
      </van-tabbar-item>
    </van-tabbar>
    
    <!-- 占位div 处理有tabbar的页面滑动内容被遮挡问题 -->
    <div class="empty-tabbar-div" v-if="isShowTabbar"></div>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant';
import { mkdir } from 'fs';
export default {
    components:{
      [Tabbar.name]:Tabbar,
      [TabbarItem.name]:TabbarItem
    },
    data() {
      return {
        isShowTabbar: true,
        tabbarIcon: {
          home: {
            normal: require('@/assets/img/home_icon.png'),
            active: require('@/assets/img/home_icon_pre.png')
          },
          my: {
            normal: require('@/assets/img/my_icon.png'),
            active: require('@/assets/img/my_icon_pre.png')
          }
        }
      }
    },
    watch: {
      $route(to, from) {
        let bottomPage = ['home', 'my'];
        let toPageName = to.name;
        let isNeedShowTabbar = false;
        for (let i=0; i<bottomPage.length; i++) {
            if (toPageName === bottomPage[i]) {
                isNeedShowTabbar = true;
                break;
            }
        }
        this.isShowTabbar = isNeedShowTabbar;
      }
    },
};
</script>

<style lang="scss" scoped>
  .van-tabbar-item__icon {
    img {
      width: 24px;
      height: 24px;
    }
  }
  .empty-tabbar-div {
    width: 100%;
    height: 50px;
  }
</style>